<template>
	<view class="search-container" :class="themeType==='light'?'bgc-light':'bgc'">
		<view class="search-row">
			<input v-model="inputValue" type="text" placeholder="歌曲搜索" @input.lazy="searchSong" @confirm="enterSearch"></input>
			<text v-show="isFocus" @click="cancel">取消</text>
		</view>
		<view v-if="keywordList.length" class="search-list-container" :class="themeType==='light'?'bgc-light':'bgc'">
			<navigator class="music-item" v-for="(keyword,index) in keywordList" :key="index" :url="'/pages/search/searchlist?keywords='+keyword" open-type="navigate">
		    {{keyword}}
			</navigator>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				inputValue:'',
				isFocus:false,
				keywordList:[],
				timer:null
			}
		},
		computed:{
			...mapState(['themeType'])
		},
		methods: {
			searchSong(){
				if(this.inputValue.trim().length>=1){
					this.inputValue=this.inputValue.trim()
					this.isFocus=true
					clearTimeout(this.timer)
					this.timer=setTimeout(()=>{
						this.request({
							url:`/search/suggest?keywords=${this.inputValue}&type=mobile`
						}).then(res=>{
							console.log(res)
							this.keywordList=res.result.allMatch.map(val=>val.keyword)
						})
					},800)
				}else{
					clearTimeout(this.timer)
					this.cancel()
					return false
				}
			},
			enterSearch(){
				console.log(this.inputValue)
				uni.navigateTo({
					url:'/pages/search/searchlist?keywords='+this.inputValue
				})
			},
			cancel(){
				this.inputValue='',
				this.keywordList=[],
				this.isFocus=false
			}
		}
	}
</script>

<style lang="scss" scoped>
.search-container{
	height: 100vh;
	/*  #ifdef APP-PLUS*/
			padding:156rpx 0;
		/*  #endif  */
	.search-row{
	  padding: 20rpx;
	  height: 84rpx;
	  display: flex;
	  input{
	    padding-left: 30rpx;
		box-sizing: border-box;
		height: 84rpx;
		line-height: 84rpx;
	    flex: 1;
	    height: 100%;
	    background-color: #707070;
	    border-radius: 42rpx;
		color: #fff;
	  }
	  text{
		margin-left: 20rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		color: red;
	  }
	}
	.search-list-container{
	  padding-top: 10rpx;
	  .music-item{
		margin-top: 10rpx;
	    padding:0 30rpx;
	    height: 90rpx;
	    line-height: 90rpx;
		color: #535355;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;}
	}
}
</style>
